<template>
  <view class="result-page">
    <!-- 等待提示 -->
    <view v-if="isLoading" class="loading-container">
      <view class="loading-content">
        <image class="loading-icon" src="/static/loading.gif" mode="aspectFit"></image>
        <text class="loading-text">AI正在评分中，请稍候...</text>
      </view>
    </view>
    
    <!-- 评分结果 -->
    <view v-else>
      <view class="header">面试结果分析</view>
      <view class="score-card">
        <view class="job">{{ scoreData.positionName || '职位未知' }}</view>
        <view class="time">{{ scoreData.interviewTime || '时间未知' }}</view>
        <view class="score-circle">
          <text class="score">{{ scoreData.totalScore || 0 }}</text>
          <text class="score-label">综合得分</text>
        </view>
      </view>
      <view class="summary">
        <view class="summary-title">综合评价</view>
        <view class="summary-content">{{ scoreData.strengths || '暂无评价' }}</view>
      </view>
      <view class="ability">
        <view class="ability-title">能力分析</view>
        <view class="ability-chart">
          <view class="chart-container">
            <view class="chart-item">
              <view class="chart-bar-wrapper">
                <view class="chart-bar" :style="{ height: (scoreData.technicalScore || 0) * 2 + 'rpx' }">
                  <text class="bar-score">{{ scoreData.technicalScore || 0 }}</text>
                </view>
              </view>
              <text class="bar-label">技术能力</text>
            </view>
            <view class="chart-item">
              <view class="chart-bar-wrapper">
                <view class="chart-bar" :style="{ height: (scoreData.communicationScore || 0) * 2 + 'rpx' }">
                  <text class="bar-score">{{ scoreData.communicationScore || 0 }}</text>
                </view>
              </view>
              <text class="bar-label">沟通表达</text>
            </view>
            <view class="chart-item">
              <view class="chart-bar-wrapper">
                <view class="chart-bar" :style="{ height: (scoreData.problemSolvingScore || 0) * 2 + 'rpx' }">
                  <text class="bar-score">{{ scoreData.problemSolvingScore || 0 }}</text>
                </view>
              </view>
              <text class="bar-label">问题解决</text>
            </view>
          </view>
        </view>
      </view>
      <view class="comment-list">
        <view class="comment-item">
          <view class="q-title">建议</view>
          <view class="q-comment">{{ scoreData.suggestions || '暂无建议' }}</view>
        </view>
      </view>
      <button class="back-btn" @click="goBack">返回面试列表</button>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      isLoading: true,
      scoreData: {
        positionName: '',
        interviewTime: '',
        totalScore: 0,
        strengths: '',
        technicalScore: 0,
        communicationScore: 0,
        problemSolvingScore: 0,
        suggestions: ''
      }
    }
  },
  onLoad(options) {
    const candidateId = options.id
    if (candidateId) {
      this.getScoreData(candidateId)
    } else {
      uni.showToast({
        title: '面试ID不存在',
        icon: 'none'
      })
    }
  },
  methods: {
    async getScoreData(candidateId) {
      try {
        console.log('开始获取评分数据，面试ID:', candidateId)
        const res = await request.get(`/api/interview/score/${candidateId}`)
        console.log('获取评分数据成功:', res)
        if (res.code === 200 && res.data) {
          this.scoreData = res.data
          this.isLoading = false
        } else {
          // 如果没有评分数据，尝试生成评分
          await this.generateScore(candidateId)
        }
      } catch (error) {
        console.error('获取评分数据失败:', error)
        // 如果是评分生成失败，显示具体错误信息
        if (error.message && error.message.includes('获取评分记录失败')) {
          uni.showToast({
            title: error.message,
            icon: 'none',
            duration: 3000
          })
        } else {
          uni.showToast({
            title: '获取评分失败，请稍后重试',
            icon: 'none',
            duration: 2000
          })
        }
        // 延迟3秒后返回面试列表
        setTimeout(() => {
          this.goBack()
        }, 3000)
      }
    },
    async generateScore(candidateId) {
      try {
        console.log('开始生成评分，面试ID:', candidateId)
        this.isLoading = true
        
        const res = await request.post(`/api/interview/score/generate/${candidateId}`)
        console.log('生成评分成功:', res)
        
        if (res.code === 200 && res.data) {
          // 更新评分数据
          this.scoreData = {
            ...this.scoreData,
            ...res.data,
            totalScore: res.data.totalScore || 0,
            technicalScore: res.data.technicalScore || 0,
            communicationScore: res.data.communicationScore || 0,
            problemSolvingScore: res.data.problemSolvingScore || 0,
            strengths: res.data.strengths || '暂无评价',
            suggestions: res.data.suggestions || '暂无建议'
          }
          
          // 延迟1秒后显示结果，让用户看到加载动画
          setTimeout(() => {
            this.isLoading = false
            uni.showToast({
              title: '评分完成',
              icon: 'success',
              duration: 2000
            })
          }, 1000)
        } else {
          this.isLoading = false
          uni.showToast({
            title: '生成评分失败，请稍后重试',
            icon: 'none',
            duration: 2000
          })
          // 延迟3秒后返回面试列表
          setTimeout(() => {
            this.goBack()
          }, 3000)
        }
      } catch (error) {
        this.isLoading = false
        console.error('生成评分失败:', error)
        uni.showToast({
          title: error.message || '生成评分失败，请稍后重试',
          icon: 'none',
          duration: 3000
        })
        // 延迟3秒后返回面试列表
        setTimeout(() => {
          this.goBack()
        }, 3000)
      }
    },
    goBack() {
      uni.reLaunch({ url: '/pages/interviewHome/interviewHome' })
    }
  }
}
</script>

<style scoped>
.result-page {
  min-height: 100vh;
  background: #f6f7fb;
  padding: 0 24rpx 40rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #4f8aff;
}

.header {
  font-size: 36rpx;
  font-weight: bold;
  color: #4f8aff;
  margin: 48rpx 0 24rpx 0;
}
.score-card {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(79,138,255,0.08);
  padding: 32rpx 24rpx;
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.job {
  font-size: 28rpx;
  color: #4f8aff;
  margin-bottom: 8rpx;
}
.time {
  font-size: 22rpx;
  color: #888;
  margin-bottom: 24rpx;
}
.score-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f8aff 0%, #6fd6ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}
.score {
  font-size: 44rpx;
  color: #fff;
  font-weight: bold;
}
.score-label {
  font-size: 22rpx;
  color: #e0eaff;
}
.summary {
  width: 100%;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 24rpx;
}
.summary-title {
  font-size: 26rpx;
  color: #4f8aff;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.summary-content {
  font-size: 22rpx;
  color: #444;
}
.ability {
  width: 100%;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 24rpx;
}
.ability-title {
  font-size: 26rpx;
  color: #4f8aff;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.ability-chart {
  padding: 20rpx 0;
}
.chart-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300rpx;
  padding: 40rpx 20rpx;
  position: relative;
}
.chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
}
.chart-bar-wrapper {
  height: 200rpx;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.chart-bar {
  width: 60rpx;
  background: linear-gradient(180deg, #4f8aff 0%, #6fd6ff 100%);
  border-radius: 30rpx 30rpx 0 0;
  position: relative;
  transition: height 0.5s ease;
  min-height: 4rpx;
}
.bar-score {
  position: absolute;
  top: -40rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #4f8aff;
  font-weight: bold;
  white-space: nowrap;
}
.bar-label {
  margin-top: 16rpx;
  font-size: 22rpx;
  color: #666;
  text-align: center;
}
.comment-list {
  width: 100%;
  margin-bottom: 32rpx;
}
.comment-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 18rpx 16rpx;
  margin-bottom: 16rpx;
}
.q-title {
  font-size: 22rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 4rpx;
}
.q-score {
  font-size: 20rpx;
  color: #4f8aff;
  margin-bottom: 4rpx;
}
.q-comment {
  font-size: 20rpx;
  color: #666;
}
.back-btn {
  width: 100%;
  font-size: 28rpx;
  font-weight: bold;
  background: #4f8aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 0;
  margin-top: 32rpx;
}
</style> 